<template>
    <div>
        <div id="box">
            <p @touchstart="atnClick" ref="one">水族箱</p>
            <p @touchstart="btnClick" ref="two">鱼饲料</p>
            <p @touchstart="ctnClick" ref="three">过滤器</p>
            <p @touchstart="dtnClick" ref="four">药水</p>
            <p @touchstart="etnClick" ref="five">装饰</p>
            <p @touchstart="ftnClick" ref="six">陆龟用品</p>
            <p @touchstart="gtnClick" ref="seven">蜥蜴用品</p>
        </div>
    </div>
</template>

<script>
export default {
     mounted:function(){
        this.$refs.one.style.color = "red"
              this.$refs.two.style.color = "black"
              this.$refs.three.style.color = "black"
              this.$refs.four.style.color = "black"
              this.$refs.five.style.color = "black"
              this.$refs.six.style.color = "black"
              this.$refs.seven.style.color = "black"
    },
     methods:{
        atnClick:function(){
              this.$refs.one.style.color = "red"
              this.$refs.two.style.color = "black"
              this.$refs.three.style.color = "black"
              this.$refs.four.style.color = "black"
              this.$refs.five.style.color = "black"
              this.$refs.six.style.color = "black"
              this.$refs.seven.style.color = "black"
        },
        btnClick:function(){
              this.$refs.one.style.color = "black"
              this.$refs.two.style.color = "red"
              this.$refs.three.style.color = "black"
              this.$refs.four.style.color = "black"
              this.$refs.five.style.color = "black"
              this.$refs.six.style.color = "black"
              this.$refs.seven.style.color = "black"
        },
        ctnClick:function(){
              this.$refs.one.style.color = "black"
              this.$refs.two.style.color = "black"
              this.$refs.three.style.color = "red"
              this.$refs.four.style.color = "black"
              this.$refs.five.style.color = "black"
              this.$refs.six.style.color = "black"
              this.$refs.seven.style.color = "black"
        },
        dtnClick:function(){
              this.$refs.one.style.color = "black"
              this.$refs.two.style.color = "black"
              this.$refs.three.style.color = "black"
              this.$refs.four.style.color = "red"
              this.$refs.five.style.color = "black"
              this.$refs.six.style.color = "black"
              this.$refs.seven.style.color = "black"
        },
        etnClick:function(){
              this.$refs.one.style.color = "black"
              this.$refs.two.style.color = "black"
              this.$refs.three.style.color = "black"
              this.$refs.four.style.color = "black"
              this.$refs.five.style.color = "red"
              this.$refs.six.style.color = "black"
              this.$refs.seven.style.color = "black"
        },
        ftnClick:function(){
              this.$refs.one.style.color = "black"
              this.$refs.two.style.color = "black"
              this.$refs.three.style.color = "black"
              this.$refs.four.style.color = "black"
              this.$refs.five.style.color = "black"
              this.$refs.six.style.color = "red"
              this.$refs.seven.style.color = "black"
        },
        gtnClick:function(){
              this.$refs.one.style.color = "black"
              this.$refs.two.style.color = "black"
              this.$refs.three.style.color = "black"
              this.$refs.four.style.color = "black"
              this.$refs.five.style.color = "black"
              this.$refs.six.style.color = "black"
              this.$refs.seven.style.color = "red"
        }
        
    }
}
</script>

<style scoped>
#box{
    width: 31vw;
    height: 86vh;
    border:solid 1px #dbdbdb;
    text-align: center;
}
p{
    cursor: pointer;
    margin: 0;
    margin-top: 5vh;
    font-size: 14px;
}
</style>